<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id='btn'>按钮</button>
</body>
<script>
const btn = document.getElementById('btn');
// btn.onclick = function() {
//     console.log('点击了')
// }

btn.onclick = myDebounce(btnClick, 1000, true);

/**
* handle 最终执行的函数
* wait  触发事件后多久执行
* immediate 是执行第一次，还是最后一次,默认执行最后一次
*/
function myDebounce(handle, wait = 300, immediate = false) {
    let timer = null;
    return function(...args) {
        const self = this;
        // 当需要执行第一次时，就是立即执行，那后面的定时器也不需要开启了
        let bool = immediate && !timer;
        //  当需要执行第一次且timer不存在
        bool ?  handle.call(self, ...args) : null;
        clearTimeout(timer);
        timer = setTimeout(() => {
            //  判断immediate值，true就不需要执行函数
            !immediate ? handle.call(self, ...args): null;
            timer = null
        }, wait);

    }
}

function btnClick(event) {
    console.log(event)
}
</script>
</html>